<template>
    <v-chart :option="option"></v-chart>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import 'echarts-wordcloud'
import { getKeywordsData } from '@/api';

const option = ref({})

const renderChart = (data) => {
    option.value = {
        tooltip:{},
        series:{
            type:'wordCloud',
            //要求数据结构[{name:'词1',value:100},{name:'词2',value:100},...]
            data:data,
            width:'100%',
            height:'100%',
            textStyle:{
                color(){
                    //生成随机颜色
                    return `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
                }
            },
            //强调高亮效果
            emphasis:{
                focus:'self',
                textStyle:{
                    textShadowBlur:5,
                    textShadowColor:'#333',
                }
            }
        }
    }
}

onMounted(async () => {
    const res = await getKeywordsData()
    // console.log(res)
    const data = res.map((item) => {
        return {
            name:item.keyWord,
            value:item.totalSearch,
        }
    })
    renderChart(data)
})
</script>

<style scoped>
</style>